<template>
  <!--头部-->
  <div class="c1">
    <el-header class="min_width">
      <nav-bar ></nav-bar>
      <div class="banner">
        <img src="../../../assets/img/a6ce035508a48ec9448266bf28ac9d0.png"  style="float: left;width: 100%;height: 100%" />
      </div>
    </el-header>
    <center><img src="../../../assets/img/blili8.png" class="img1"></center>
    <!--头像 资料-->
    <div  class="demo-type">
      <el-avatar :size="65" src="https://empty">
        <img :src="user.userImgsrc" />
      </el-avatar>
        <span style="position: absolute;left: 18%;top: 25%;font-size: 30px;font-weight: bold;color: whitesmoke">{{ user.userNickname }}</span><br>
      <span style="position: absolute;left: 18.2%;top: 30%;font-weight: bold;color: whitesmoke">{{ user.userSuggest }}</span>
      <Button shape="circle" v-if="!this.fansFand"  type="success" icon="md-add" style="position: absolute;left:80%;top: 28%; font-weight: bold" @click="clickFans()" ghost>关注他</Button>
      <Button shape="circle" v-if="this.fansFand"  type="success" icon="md-add" style="position: absolute;left:80%;top: 28%; font-weight: bold" @click="clickFans1()" ghost>取消关注</Button>
    </div>

    <!--菜单-->
    <el-container>
      <el-header class="h1">
        <el-menu :default-active="activeIndex" class="el-menu-demo"  style="margin-left: -2.2%;" mode="horizontal">
          <router-link :to="{name:'othershome', query: {id:id}}" style="text-decoration: none;">
            <el-menu-item index="1" >
              <i class="el-icon-s-home"></i>
              首页</el-menu-item>
          </router-link>
          <router-link :to="{name:'othersvideo', query: {id:id}}"  style="text-decoration: none">
            <el-menu-item index="3" >
              <i class="el-icon-s-platform"></i>
              视频</el-menu-item>
          </router-link>
        <!--  <router-link style="text-decoration: none;margin-left: 43.5%;">-->
            <span style="text-decoration: none;margin-left: 43.5%;">关注数{{attention}}</span>
         <!-- </router-link>  -->  |
        <!--  <router-link  style="text-decoration: none;">-->
              <span>
                粉丝数{{fans}}
              </span>
        <!--  </router-link>  -->  |
          <span>播放量{{videoIsreprintsum}}</span>    |
          <span>点赞数{{easynum}}</span>
        </el-menu>
      </el-header>
    </el-container>
    <center>
      <el-main style="height: 100%; width: 77%">
        <router-view />
      </el-main>
    </center>

  </div>
</template>

<script>
import {FindAll} from "../../../api/user/user";
import {VideoIsreprintSum} from "../../../api/video/video";
import {attentionNum, FansFandAll, fansNum, FansQuery} from "../../../api/fans/fans";
import {EasyNum} from "../../../api/videos/videos";

export default {
  name: "others",
  data(){
    return{
      id:'',
      activeIndex: '1',
      userSuggest:'',
      userNickname:'',
      fans:'',
      attention:'', //关注
      videoIsreprintsum:0,
      user:{},
      fansFand:{},
      a:'关注他',
      easynum:0
    }
  },
  created() {
    let userId= this.$route.query.id;
    this.id=userId;
    if (userId!=null&&userId!=''){
      this.findAll();
      this.fansFandAll();
    }else{
      this.$router.push("/home")
    };
  },
  mounted() {
    let userId= this.$route.query.id;
    if (userId!=null&&userId!=''){
      this.fansattentionNum();
      this.fansfansNum();
      this.videoIsreprintSum();
    }else{
      this.$router.push("/home")
    }
  },
  methods:{
    /**
     * 点赞数
     */
    easyNum() {
      let bigvId= this.$route.query.id;
      if (bigvId != null) {
        EasyNum(bigvId).then(result => {
          console.log(result);
          this.easynum=result.data;
        })
      }
    },
    /**
     * 关注点击事件
     */
    clickFans(){
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      let bigvId= this.$route.query.id;
      if (bigvId!=userId){
          this.fansQuery();
      }else{
        this.$message({
          message: '不能关注自己哦',
          type: 'warning'
        });
      }

    },
    /**
     * 判断是否已经关注
     */
    fansQuery(){
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      let bigvId= this.$route.query.id;
      if (userId!=null&&userId!=''&&bigvId!=null&&bigvId!=''){
        FansQuery(userId,bigvId).then(result=>{
          console.log(result.data);
          this.fansFandAll();
        })
      }
    },
    clickFans1(){
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      let bigvId= this.$route.query.id;
      if (bigvId!=userId){
        this.fansQuery();
      }else{
        this.$message({
          message: '不能关注自己哦',
          type: 'warning'
        });
      }
    },
    fansFandAll(){
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      let bigvId= this.$route.query.id;
      if (userId!=null&&userId!=''&&bigvId!=null&&bigvId!=''){
        FansFandAll(userId,bigvId).then(result=>{
            this.fansFand=result.data;
        })
      }
    },

    /**
     * 查询用户信息
     */
    findAll(){
      let userId= this.$route.query.id;
      FindAll(userId).then(result=>{
        this.user=result.data;
      })
    },
    /**
     * 查询用户总视频播放量
     */
    videoIsreprintSum(){
      let userId= this.$route.query.id;
      VideoIsreprintSum(userId).then(result=>{
        this.videoIsreprintsum=result.data;
      })
    },
    /**
     * 用户关注人数
     */
    fansattentionNum(){
      let userId= this.$route.query.id;
      if (userId!=null&&userId!=''){
        attentionNum(userId).then(result=>{
          this.attention=result.data;
        })
      }else{
        console.log(this.$message.error("用户值为空"))
      }
    },
    fansfansNum(){
      let userId= this.$route.query.id;
      if (userId!=null&&userId!=''){
        fansNum(userId).then(result=>{
          this.fans=result.data;
        })
      }else{
        console.log(this.$message.error("用户值为空"))
      }
    },
    cli(){
      let userId= this.$route.query.id;
      if (userId!=null&&userId!=''){
        this.$router.push({
          name:'/othershome',
          query:{
            id:userId
          }
        })
      }

    },
  }
}
</script>

<style scoped>
/*.c1{
    position: absolute;


}*/
.min_width {
  /* 最小宽度 */
  min-width: 1100px;
}
.banner {
  position: relative;
  left: 0;
  top: -90%;
  z-index: -1;
  width: 100%;
  height: 9.5vw;
  overflow: hidden;
}
.img1{
  margin-top: 5.5%;
  width: 77%;
}
.demo-type{
  margin-top: -7%;
  margin-left: 13%;
}
.h1{
  text-align: center;
  width: 100%;
}
</style>
